<template>
	<view v-if="zwyPopupShow" :class="popupType" class="zwyPopup">
		<view @click="maskClick" class="zwyPopupMask"></view>
		<view
			:class="[closeAni ? popupType + 'Hide' : popupType + 'Show',popupType + 'Radius']"
			class="zwyPopupBox"
			:style="{
				width:width ? width : widthDefault[popupType],
				height:height ? height : heightDefault[popupType],
				'max-height':maxHeight ? maxHeight : maxHeightDefault[popupType]
				}"
		>
			<view v-if="showClose" @click="close" class="zwyPopupCloseBox">
				<image class="zwyPopupCloseImg" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/zwyPopupClose.png"></image>
			</view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	name: 'zwyPopupAll',
	props: {
		showClose: {
			type: Boolean,
			default: true
		},
		maskCanClose: {
			type: Boolean,
			default: true
		},
		maxHeight: {
			type: String,
			default: ''
		},
		width: {
			type: String,
			default: ''
		},
		height: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			maxHeightDefault: {
				mid: '',
				bottom: '60vh',
				top: '60vh',
				left: '',
				right: ''
			},
			heightDefault: {
				mid: '',
				bottom: '',
				top: '',
				left: '100vh',
				right: '100vh'
			},
			widthDefault: {
				mid: '',
				bottom: '100vw',
				top: '100vw',
				left: '70vw',
				right: '70vw'
			},
			popupType: 'mid',
			zwyPopupShow: false,
			closeAni: false
		};
	},
	methods: {
		maskClick() {
			if (this.maskCanClose) this.close();
		},
		show(type) {
			if (this.zwyPopupShow) {
				this.zwyPopupShow = false;
				setTimeout(() => {
					this.closeAni = false;
					this.popupType = type;
					this.zwyPopupShow = true;
				}, 50);
				return;
			}
			(this.closeAni = false), (this.popupType = type), (this.zwyPopupShow = true);
			this.$emit('popupIsShow');
		},
		closeNoAni() {
			this.zwyPopupShow = false;
			this.$emit('popupIsClose');
		},
		close(type) {
			if(type =='none'){
				this.zwyPopupShow = false;
				this.$emit('popupIsClose');
				return;
			}
			this.closeAni = true;
			setTimeout(() => {
				this.zwyPopupShow = false;
				this.$emit('popupIsClose');
			}, 260);
		}
	}
};
</script>

<style>
.rightRadius {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
@keyframes rightHide {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(100%);
	}
}
.rightHide {
	animation: rightHide 0.3s both;
}
@keyframes rightShow {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0);
	}
}
.rightShow {
	animation: rightShow 0.3s both;
}
.right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.leftRadius {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}
@keyframes leftHide {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}
.leftHide {
	animation: leftHide 0.3s both;
}
@keyframes leftShow {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0);
	}
}
.leftShow {
	animation: leftShow 0.3s both;
}
.left {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.topRadius {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}
@keyframes topHide {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-100%);
	}
}
.topHide {
	animation: topHide 0.3s both;
}
@keyframes topShow {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
	}
}
.topShow {
	animation: topShow 0.3s both;
}
.top {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.bottomRadius {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
@keyframes bottomHide {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(100%);
	}
}
.bottomHide {
	animation: bottomHide 0.3s both;
}
@keyframes bottomShow {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}
.bottomShow {
	animation: bottomShow 0.3s both;
}
.bottom {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.mid {
	display: flex;
	align-items: center;
	justify-content: center;
}
.zwyPopupCloseBox {
	z-index: 999;
	position: fixed;
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	right: 0;
	top: 0;
}
.zwyPopupCloseImg {
	width: 30rpx;
	height: 30rpx;
}
@keyframes midHide {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(0);
	}
}
.midHide {
	animation: midHide 0.3s both;
}
@keyframes midShow {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}
.midShow {
	animation: midShow 0.3s both;
}

@keyframes midSkewHide {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(0);
	}
}
.midSkew {
	display: flex;
	align-items: center;
	justify-content: center;
}
.midSkewHide {
	animation: midSkewHide 0.3s both;
}
@keyframes midSkewShow {
	from {
		transform: scale(0) rotateY(0);
	}
	to {
		transform: scale(1) rotateY(360deg);
	}
}
.midSkewShow {
	animation: midSkewShow 1s both;
	transform-origin: center;
}

.zwyPopupBox {
	position: relative;
	box-sizing: border-box;
	border-radius: 10rpx;
}
.zwyPopupMask {
	position: absolute;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.8);
}
.zwyPopup {
	top: 0;
	left: 0;
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 99999;
}
</style>
